<template>
	<view class="classifybox">
		<view class="classleft">
			<view v-for="(item,index) in tabList" :key="index" @click="headlist(index)" :class="index==tabactive ? 'active':''">
				<view class="nav">{{item.cat_name}}</view>
			</view>
		</view>
		<view class="classright">
			<view v-for="(item,index) in tabList[tabactive].children[0].children" :key="index">
				<view><image :src="item.cat_icon"/></view>
				<view>{{item.cat_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[],
				tabactive:0
			};
		},
		methods:{
			headlist(index){
				this.tabactive=index
			},
			getList(){
				uni.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/categories",
					method:'GET'
				}).then((resp)=>{
					this.tabList=resp[1].data.message
				})
			}
		},
		created() {
			this.getList()
		}
	}
</script>

<style lang="scss">
.classifybox{
	display: flex;
}
.classleft{
	width: 20vw;
	height: 100vh;
	overflow-y: auto;
	text-align: center;
}
.classleft .nav{
	margin-top: 5px;
}
.classright{
	width: 80vw;
	height: 100vh;
	overflow-y: auto;
	 
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.classright image{
	width: 100px;
	height: 100px;
	margin-left: 2px;
	margin-top: 5px;
}
.active{
	color: red;
}
</style>
